<script setup>
import { RouterView } from "vue-router";
import Top from "@/components/Top.vue";
import Bottom from "@/components/Bottom.vue";
</script>

<template>
  <div class="chat">
    <div class="top">
      <Top />
    </div>
    <div class="content">
      <RouterView />
    </div>
    <div class="bottom">
      <Bottom />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.chat {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .top {
    background-color: #f3fce4;
  }
  .content {
    flex: 1;
    overflow: auto;
  }
  .bottom {
    background-color: #f3fce4;
  }
}
</style>
